<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>Title</title>
    <link href="css/base.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
<div class="jd_container">

    <!--顶部搜索-->
    <header class="jd_search">
        <div class="jd_search_box">
            <a href="#" class="icon_logo"></a>
            <form action="#">
                <span class="icon_search"></span>
                <input type="search" placeholder="搜索">
            </form>
            <a href="#" class="login">登录</a>
        </div>
    </header>

    <!--轮播图-->
    <div class="jd_banner">
        <ul>
            <!--
            移动设备中,因为我们可以通过手指进行滑动的操作,所以
            由于我们ao不知道我们手指即将滑动那个方向,所以在左右两边都应该放上图片
            所以对于一个8张的轮播,我们就需要十张图片
            -->
            <li><a href="#"><img src="images/l8.jpeg" alt=""></a></li>
            <li><a href="#"><img src="images/l1.jpeg" alt=""></a></li>
            <li><a href="#"><img src="images/l2.jpeg" alt=""></a></li>
            <li><a href="#"><img src="images/l3.jpeg" alt=""></a></li>
            <li><a href="#"><img src="images/l4.jpeg" alt=""></a></li>
            <li><a href="#"><img src="images/l5.jpeg" alt=""></a></li>
            <li><a href="#"><img src="images/l6.jpeg" alt=""></a></li>
            <li><a href="#"><img src="images/l7.jpeg" alt=""></a></li>
            <li><a href="#"><img src="images/l8.jpeg" alt=""></a></li>
            <li><a href="#"><img src="images/l1.jpeg" alt=""></a></li>
        </ul>
        <ul>
            <li class="now"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>


    </div>

    <!--导航栏-->
    <div class="jd_nav">
        <ul class="clearFix">
            <li><a href="#"><img src="" alt="">
                <p>分类</p>
            </a></li>
            <li><a href="#"><img src="" alt="">
                <p>分类</p>
            </a></li>
            <li><a href="#"><img src="" alt="">
                <p>分类</p>
            </a></li>
            <li><a href="#"><img src="" alt="">
                <p>分类</p>
            </a></li>
            <li><a href="#"><img src="" alt="">
                <p>分类</p>
            </a></li>
            <li><a href="#"><img src="" alt="">
                <p>分类</p>
            </a></li>
            <li><a href="#"><img src="" alt="">
                <p>分类</p>
            </a></li>
            <li><a href="#"><img src="" alt="">
                <p>分类</p>
            </a></li>
        </ul>

    </div>

    <!--产品区块-->
    <div class="jd_product">
        <section class="jd_product_box sk"><!--second kill-->
            <div class="title nb">
                <div class="f_left">
                    <span class="icon"></span>
                    <span class="name">掌上秒杀</span>
                    <div class="time">
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                    </div>
                </div>
                <div class="f_right">
                    <a href="#" class="m_r10">更多&gt;</a>
                </div>
            </div>
            <div class="con">
                <ul class="pro clearFix">
                    <li><a href="#"><img src="images" alt=""></a>
                        <p class="nowPrice">&yen;10.00</p>
                        <p class="oldPrice">&yen;100.00</p>
                    </li>
                </ul>
                <ul class="pro">
                    <li><a href="#"><img src="images" alt=""></a>
                        <p class="nowPrice">&yen;10.00</p>
                        <p class="oldPrice">&yen;100.00</p>
                    </li>
                </ul>
                <ul class="pro">
                    <li><a href="#"><img src="images" alt=""></a>
                        <p class="nowPrice">&yen;10.00</p>
                        <p class="oldPrice">&yen;100.00</p>
                    </li>
                </ul>
            </div>

        </section>
        <section class="jd_product_box">
            <div class="title ">
                <h3>京东超市</h3>
            </div>
            <div class="con clearFix">
                <a href="#" class="w_50p f_left br"><img src="imga" alt=""></a>
                <a href="#" class="w_50p f_right bb"><img src="imga" alt=""></a>
                <a href="#" class="w_50 f_right"><img src="imga" alt=""></a>
            </div>

        </section>
        <section class="jd_product_box">
            <div class="title">
                <h3>京东自营</h3>
            </div>
            <div class="con clearFix">
                <a href="#" class="f_right w_50p bl"><img src="imga" alt=""></a>
                <a href="#" class="f_left w_50p bb"><img src="imga" alt=""></a>
                <a href="#" class="f_left w_50p"><img src="imga" alt=""></a>
            </div>
        </section>
        <section class="jd_product_box">
            <div class="title">
                <h3>京东热门</h3>
            </div>
            <div class="con clearFix">
                <a href="#" class="w_50p f_left br"><img src="imga" alt=""></a>
                <a href="#" class="w_50p f_right bb"><img src="imga" alt=""></a>
                <a href="#" class="w_50 f_right"><img src="imga" alt=""></a>
            </div>
        </section>
    </div>
</div>

<script src="js/common.js"></script>
<script src="js/index.js"></script>
</body>
</html>